<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>元素的定位</title>
		<style type="text/css">
			/* 
			【1】，position属性:定义建立元素布局所用的定位机制
			     1,position:static;    -->元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，
				 置于其父元素中。 忽略（top,left,right,bottom或者z-index的声明）
				 
				 2,position:absolute;  -->生成绝对定位元素，相对于第一父元素进行定位。元素框从文档流完全删除，并相对于其包含块定位
				 。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。
				 元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。 元素位置通过top,left,right,bottom属性进行规定，可为负数,相反方向走。
				 
				 3,position:fixed;     -->生成绝对定位元素，相对于浏览器窗口进行定位。元素框的表现类似于将 position 设置为 absolute，脱离文档流
				 不过其包含块是视窗本身。 元素位置通过top,left,right,bottom属性进行规定，可为负数，相反方向走。
				 
				 4,position:relative;  -->生成相对定位的元素，元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。 

			【2】，z-index属性：检索或设置对象的层叠顺序
			     1,z-index:auto;   -->默认值，遵从其父元素
				 2,z-index:number; -->无单位的整数值，可为负数
				【注】number数大的元素对象在其上，其值相同时，按照HTML文档中声明的顺序层叠。
				      此属性仅仅作用于position属性值为absolute 和 relative的对象中。
			 
			 */
			*{
				margin:0;
				padding:0;
			}
			.div1{
				width:200px;
				height:200px;
				margin:0;
				padding:0;
				position:absolute;/* 绝对定位 */
				left:50px;/* 方位属性 */
				top:50px;/* 方位属性 */
				z-index:1;
				background-color:green;
			}
			.div2{
				width:400px;
				height:400px;
				margin:0;
				padding:0;
				position:relative;
				left:100px;
				top:200px;
				z-index:-1;
				background-color:red;
			}
			.div3{
				width:600px;
				height:600px;
				margin:0;
				padding:0;
				position:fixed;
				left:500px;
				top:200px; 
				background-color:blue;
			}
		</style>
		<script type="text/javascript"></script>
	</head>
	<body>
	      <div class="div1"></div>
		  <div class="div2"></div>
		  <div class="div3"></div>
	</body>
</html>
